<template>
    <div class="container">
        <a-card title="采购计划">
            <div class="tool-bar">
                <a-input-search allowClear style="width: 200px;" v-model="kw" placeholder="品名" @search="getTableData"></a-input-search>
                <a-button type="primary" @click="add" >新增</a-button>
            </div>
            <div class="table">
                <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>i" :columns="tableOption.columns"
                         :data-source="tableOption.dataSource" :pagination="tableOption.pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-popconfirm v-show="record.publishState == 1" okText="确定" cancelText="取消" title="确定下发吗？" @confirm="send(record)">
                                <a-button style="margin-right: 10px" type="primary">下发</a-button>
                            </a-popconfirm>
<!--                            <a-button style="margin-right: 10px" type="primary" @click="edit(record)">编辑</a-button>-->
                            <a-button style="margin-right: 10px" type="primary" @click="detail(record)">详情</a-button>
                            <a-popconfirm okText="确定" cancelText="取消" title="确定删除吗？" @confirm="remove(record)">
                                <a-button type="danger">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <add-or-edit :viewDetail="viewDetail" :editId="editId" :visible="modalVisible" @closeModal="onClose"></add-or-edit>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
@Component({
    name: "productionPlan",
    components: {
        addOrEdit: () => import("./components/addOrEdit.vue"),
    },
})
export default class extends Vue {
    modalVisible = false;
    kw = "";
    tableOption:any = {
        loading: false,
        dataSource: [],
        columns: [
            {
                title: "采购批号",
                dataIndex: "batch",
                key: "batch",
                align: "center",
            },
            {
                title: "品名",
                dataIndex: "name",
                key: "name",
                align: "center",
            },
            {
                title: "药材名称",
                dataIndex: "name",
                key: "name1",
                align: "center",
            },
            {
                title: "现有库存量(kg)",
                dataIndex: "stockNum",
                key: "stockNum",
                align: "center",
            },
            // {
            //     title: "需求量(kg)",
            //     dataIndex: "purchaseNum",
            //     key: "purchaseNum",
            //     align: "center",
            // },
            {
                title: "计划采购数量(kg)",
                dataIndex: "purchaseNum",
                key: "purchaseNum",
                align: "center",
                customRender: (text: string) => {
                    return text ? text:'--'
                },
            },
            {
                title: "采购药材标准",
                dataIndex: "createTime",
                key: "createTime",
                align: "center",
            },
            {
                title: "预计购回日期",
                dataIndex: "purchaseTime",
                key: "purchaseTime",
                align: "center",
            },
            {
                title: "状态",
                dataIndex: "publishState",
                key: "publishState",
                align: "center",
                customRender: (text: string) => {
                    return text == "2" ? "已下发" : "待下发";
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                scopedSlots: { customRender: "action" },
            },
        ],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number | string) => `共${total}条`,
            onChange: this.pageChange,
        },
    };
    editId = "";
    viewDetail = false;
    mounted() {
        this.getTableData();
    }
    async getTableData() {
        this.tableOption.loading = true;
        let params = {
            page: this.tableOption.pagination.current,
            pageSize: this.tableOption.pagination.pageSize,
            name: this.kw,
        };
        const res = await nextApi.getPlanList(params);
        if(res.data){
            this.tableOption.dataSource = res.data.records;
            this.tableOption.pagination.total = res.data.total;
        }
        this.tableOption.loading = false;
    }
    //新增
    add() {
        this.modalVisible = true;
        this.editId = "";
    }
    //下发
    async send(record: any){
        console.log('下发',record)
        this.tableOption.loading = true
       try{
           const res = await nextApi.changePurchaseState({id:record.id,publishState:'2'})
           if(res.code == 200){
               this.$message.success(res.msg)
           }
       }finally {
           this.tableOption.loading = false
           await this.getTableData()
       }

    }
    //编辑
    edit(record: any) {
        this.editId = record.id;
        this.modalVisible = true;
    }
    //详情
    detail(record: any) {
        this.editId = record.id;
        this.viewDetail = true;
        this.modalVisible = true;
    }
    //删除
    async remove(record: any) {
        const res = await nextApi.deletePurchasePlan({id:record.id});
        if (res.code == 200) {
            this.$message.success(res.msg);
            await this.getTableData();
        }
    }

    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.pageSize = pageSize;
        this.tableOption.pagination.current = page;
        this.getTableData();
    }
    onClose() {
        this.editId = "";
        this.modalVisible = false;
        this.viewDetail = false;
        this.getTableData();
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
</style>
